<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-04-09 13:36:18
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-04-09 16:39:32
 * @FilePath: \ant-design-vue-jeecg-master\src\views\baseStationChannel\modules\infoModal.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-modal
    title="详情"
    :visible="visible"
    :confirm-loading="confirmLoading"
    cancelText="强退"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="当前频道">
        <a-input v-model="form.code" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="频道配置">
        <a-select v-model="form.region" placeholder="请选择">
          <a-select-option :key="index" v-for="(item, index) in configList"> {{ item.label }} </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="授权码">
        <a-input v-model="form.code" placeholder="请输入" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'infoModal',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      visible: false,
      confirmLoading: false,
      form: {},
      configList: [],
      // statusList: [
      //   { status: 0 },
      //   { status: 2 },
      //   { status: 3 },
      //   { status: 1 },
      //   { status: 0 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 2 },
      //   { status: 0 },
      //   { status: 3 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 2 },
      //   { status: 3 },
      //   { status: 1 },
      //   { status: 0 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 1 },
      //   { status: 2 },
      //   { status: 0 },
      //   { status: 3 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      //   { status: 0 },
      // ],
    }
  },
  created() {
    for (let i = 1; i < 33; i++) {
      this.configList.push({ label: i, value: i })
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.statusContainer {
  // width: 420px;
  display: flex;
  flex-wrap: wrap;
}
.statusBox {
  width: 12.5%;
  text-align: center;
}
.WPZ,
.WJL,
.JL,
.DX {
  display: inline-block;
  width: 15px;
  margin: auto;
  height: 15px;
  border-radius: 50%;
  margin-right: 5px;
}
.WPZ {
  background: red;
}
.WJL {
  background: rgb(230, 215, 19);
}
.JL {
  background: rgb(80, 226, 60);
}
.DX {
  background: rgb(119, 118, 118);
}
</style>
